<template>
    <h2>本地的 todo list 代办清单</h2>
    <el-button @click="ShowDialog=true">创建</el-button>
    <el-table :data="todoList" style="width: 100%" type="index">
       <el-table-column prop="content" label="内容" width="180"></el-table-column>
       <el-table-column prop="date" label="时间" width="180"></el-table-column>
       <el-table-column prop="operation" label="操作" width="180">
         <template v-slot="scope">
         <el-button type="danger" @clik.native="delFF(scope.$index)">删除</el-button>
         <el-button type="primary" @click="editFF">编辑</el-button>
       </template>
       </el-table-column>
     </el-table>
   
   <!-- 弹框   -->
   <el-dialog v-model="ShowDialog"  @open="onOpen" @close="onClose" :title="form.id?'修改代办':'添加代办'">
         <el-form ref="formRef" :model="form" :rules="rules" size="small" label-width="100px"
           label-position="left">
           <el-form-item label="内容" prop="content">
             <el-input v-model="form.content" placeholder="请输入内容" clearable :style="{width: '100%'}"></el-input>
           </el-form-item>
           <el-form-item label="时间" prop="date">
             <el-date-picker v-model="form.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :style="{width: '100%'}" placeholder="请选择时间" clearable></el-date-picker>
           </el-form-item>
         </el-form>
         <div slot="footer">
           <el-button type="primary" @click="handelConfirm"  >确定</el-button>
         </div>
       </el-dialog>
    
   
   
   
   </template>
   
   <script>
   export default {
     name: 'app',
     components: {},
     data() {
       return {
     todoList:[],
     ShowDialog:false,
     form: {
           content: undefined,
           date: null,
         },
         rules: {
           content: [],
           date: [],
         },
       }
     },
     created() {},
     mounted() {},
     methods: {
       onClose() {
         this.$refs['formRef'].resetFields()
       },
       // 新增
       handelConfirm() {
         this.$refs['formRef'].validate(valid => {
           if (!valid) return
           // this.form.date=this.form.date.toTime
           this.todoList.push({content:this.form.content,date:this.form.date})
           window.localStorage.setItem('todoList',JSON.stringify(this.todoList))
           this. ShowDialog=false
         })
       },
       // 删除
       delFF(index){
       //  this.$confirm('确认删除?', '提示', {
       //  confirmButtonText: '确定',
       //  cancelButtonText: '取消',
       //  type: 'warning',
       //  }).then(async action => {
       //  await this.todoList.splice(this.todoList.index,1)
       //  })
       this.todoList.splice(index,1)
         
       },
       // 编辑
       editFF(){
   this.ShowDialog=true
       }
     }
   }
   </script>
   
     <style scoped lang="scss">
   
     </style>
   